<template>
  <div class="messageWraper">
    <div class="messageTop">
      <h2>{{ wallType[main.index].title }}</h2>
      <p>{{ wallType[main.index].slogan }}</p>
    </div>
    <div class="messageZj">
      <li :class="{ active: index === id }" v-for="(item, index) of lable[main.index]" :key="index"
        @click="active(index)">
        {{ item }}
      </li>
    </div>
    <div class="messageCart" v-if="index === 0">
      <myCard bgc="orange" :note="noteData" />
    </div>
    <div class="photo" v-else>
      <myPhotoCard />
    </div>
    <!-- 添加按钮 -->
    <div class="addBtn" :style="{ bottom: addBtnB + 'px' }" @click="popupsIsShow()" v-show="!popupsShow">
      <span class="iconfont icon-chuangjiantianjiapiliangtianjia"></span>
    </div>
    <!-- 弹出层 -->
    <myPopups :title="popups.title" />
    <myCardDetail />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive } from 'vue'
import { storeToRefs } from 'pinia'

import { wallType, lable } from '../assets/data/wall'
import { useMainStore } from '../store/index'
import { note } from '../mock/index'

import myCard from '../components/Card.vue'
import myPopups from '../components/Popups.vue'
import myCardDetail from '../components/CardDetail.vue'
import myPhotoCard from '../components/PhotoCard.vue'

onMounted(() => {
  // 监听滚动条位置
  window.addEventListener('scroll', scrollTop, true)
})


// mock_留言数据
const { data: noteData } = note

const main = useMainStore()
const { popupsShow, index } = storeToRefs(main)

const id = ref<Number>(0)

// 标签点击
const active = (index: Number) => {
  id.value = index
}

// 添加按钮 bottom
let addBtnB = ref<number>(40)

// 实时滚动条高度
const scrollTop = () => {
  // 距离顶部的高度
  let scroll = document.documentElement.scrollTop || document.body.scrollTop;
  // 屏幕高度
  let clientH = document.documentElement.clientHeight
  // 内容高度
  let scrollH = document.documentElement.scrollHeight
  if (scroll + clientH + 100 >= scrollH) {
    addBtnB.value = scroll + clientH + 100 - scrollH
  } else {
    addBtnB.value = 40
  }
}

// 弹出层数据
const popups = reactive({
  title: '写留言'
})

// 控制弹出层的显示与隐藏
const popupsIsShow = async () => {
  if (!main.popupsShow) {
    main.popupsShow = true
  }

}

onUnmounted(() => {
  removeEventListener('scroll', scrollTop, true)
})

</script>

<style lang="scss" scoped>
$h2Size: 48px;
$addBtn: 40px;

.messageWraper {
  width: 100%;

  .messageTop {
    text-align: center;
    margin-bottom: 30px;

    h2 {
      font-size: $h2Size;
      margin-bottom: 10px;
    }

    p {
      font-size: calc($h2Size/3);
      color: rgb(118, 118, 118);
    }
  }

  .messageZj {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: center;

    li {
      width: 43px;
      margin-right: 10px;
      cursor: pointer;
      color: rgb(118, 118, 118);
    }
  }

  .messageCart {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-evenly;
  }

  .photo {
    min-height: 400px;
  }
}

.active {
  box-sizing: border-box;
  width: 40px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-top: 5px;
  margin-left: -10px;
  border: 1px solid orange;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  background-color: rgb(222, 254, 254);
}

.addBtn {
  width: $addBtn;
  height: $addBtn;
  background-color: black;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 997;
  position: fixed;
  right: 40px;
  transition: all .4s;

  span {
    color: orange;
    line-height: $addBtn;
    display: block;
    margin-left: calc(($addBtn/4));
    cursor: pointer;
  }
}
</style>